* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    /* 浏览器默认字体是16px */
}

body {
    background-image: url(./img/底色.png);
    /* 定义背景图片的重复方式：不重复 */
    background-repeat: no-repeat;
}

/* 直接对所有img标签设置宽高 */
img {
    width: 100%;
    height: 100%;
}

header {
    /* 相对于上一级body的100% */
    width: 100%;
    height: 14vh;
    /* 把边框的1px算进边框里，就不会有滚动条 */
    box-sizing: border-box;
    /* 这是线：border: 1px solid black; */
    background-image: url(./img/顶部@2x.png);
    background-size: 100%;
    /* 为每一个背景图片设置初始位置：居中 */
    background-position: center;
}

main {
    width: 100%;
    height: 76vh;
    /* 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的 */
    box-sizing: border-box;
    /* border: 1px solid black; */
}

.section-1 {
    width: 90%;
    height: 15vh;
    /* 设置居中 */
    margin: 0 auto;
    box-sizing: border-box;
    /* border: 1px solid black; */
    /* 让里面的四个盒子水平排放 */
    display: flex;
    /* 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点 */
    justify-content: space-between;
}

.card {
    /* 宽度去掉，让里面内容撑大盒子width: 25%; */
    height: 15vh;
    box-sizing: border-box;
    /* border: 1px solid black; */
    display: flex;
    justify-content: center;
    background-color: white;
    align-items: center;
    /* margin: 1rem 0; */
    /*设置阴影效果： x轴的偏移量，y轴的偏移量，模糊半径和颜色 */
    box-shadow: 1px 2px 3px black;
    /* 设置四角为圆圆的 */
    border-radius: 6px;
}

.card-imgbox {
    /* width: 40%; */
    height: 100%;

}
/* 调1字体 */
.card-text-num{
    font-size: 6rem;
    font-weight: 400;
    color: rgba(128, 128, 128, 1);
}

.card-text-span{
    /* 可以试一下有无的效果 */
    /* font-size: 50%; */
    font-weight: 100%;
    text-align: right;
}

.card-text {
    width: 50%;
    height: 100%;
    /* 文字向右对齐 */
    text-align: right;
    margin: 2rem;
}

.section-2 {
    width: 90%;
    height: 10vh;
    /* 设置居中 */
    margin: 0 auto;
    box-sizing: border-box;
    /* border: 1px solid black; */
    /* 让里面的四个盒子水平排放 */
    display: flex;
}

.section-2-item {
    width: 20%;
    height: 10vh;
    box-sizing: border-box;
    /* border: 1px solid black; */
    display: flex;
    /* flex布局里面的属性：水平居中 */
    justify-content: center;
    /* flex布局里面的属性：垂直居中 */
    align-items: center;
}

.section-2-item ::before {
    content: '· ';
    /* display: block; */
    margin-right: 10px;
}

.section-3 {
    width: 90%;
    height: 12vh;
    /* 设置居中 */
    margin: 0 auto;
    box-sizing: border-box;
    /* border: 1px solid black; */
    /* 让里面的四个盒子水平排放 */
    display: flex;
    justify-content: space-between;
}

.card-3 {
    width: 10%;
    height: 12vh;
    box-sizing: border-box;
    border: 1px solid black;
    /* 文字居中 ,加了子绝父相后无效果*/
    /* text-align: center; */
    position: relative;
    background-color: #fff;
    box-shadow: 1px 2px 3px black;
    border-radius: 6px;
}

.card3-text{
    position: absolute;
    top: 70%;
    left: 35%;
}

.card3-3-imgbox {
    width: 50%;
    height: 45%;
    /* 居中； rem：相对长度单位，相对于根元素，常用于响应式布局
    两个值 margin：上下，左右
    三个值 margin： 上 左右 下
    四个值margin：上 右 下 左
    padding同理
    */
    margin: 2rem auto;
    
}

.section-4 {
    width: 90%;
    height: 6vh;
    /* 设置居中 */
    margin: 0 auto;
    box-sizing: border-box;
    /* border: 1px solid black; */
    /* 让里面的四个盒子水平排放 */
    display: flex;
    position: relative;
}
.text4-d{
    position: absolute;
    top: 40%;
    left: 1%;
    color: red;
}

.section-5 {
    width: 90%;
    height: 14vh;
    /* 设置居中 */
    margin: 0 auto;
    box-sizing: border-box;
    /* border: 1px solid black; */
    /* 让里面的四个盒子水平排放 */
    display: flex;
    justify-content: space-between;
}

.card-5 {
    width: 15%;
    height: 12vh;
    box-sizing: border-box;
    border: 1px solid black;
    background-color: blue;
    position: relative;
    border-radius: 6px;
}
.card-5-text{
    position: absolute;
    top: 44%;
    left: 40%;
    /* 没用text-align: center; */
}

.section-6 {
    width: 90%;
    height: 14vh;
    /* 设置居中 */
    margin: 0 auto;
    box-sizing: border-box;
    /* border: 1px solid black; */
    /* 让里面的四个盒子水平排放 */
    display: flex;
    justify-content: space-between;
}

footer {
    width: 100%;
    height: 10vh;
    box-sizing: border-box;
    /* border: 1px solid black; */
    background-image: url(https://img.js.design/assets/img/6355e194a38f42339d6d03f1.png#7d3e18b9243c5aaecdc2156ed0dde008);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}
.footer-out{
    width: 2rem;
    height: 2rem;
    background-image: url(./img/退出.png);
    background-size: 100%;
    background-repeat: no-repeat;
}
.footer-tianqi{
    width: 20rem;
    height: 2rem;
    background-image: url(./img/天气.png.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 1rem;
    left: 10%

}
.footer-date{
    width: 20rem;
    height: 3rem;
    background-image: url(./img/2022-10-19\ \ \ 21_15_12.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 9%

}